<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$.validator.addMethod(
      "myDate",
      function (value, element) {
      		var nowDate = new Date();
	      	year = value.split('-')[0];
	      	month = value.split('-')[1];
	      	day = value.split('-')[2];
	      	if(year>=2010 && year<=3000 && month>=1 && month<=12)
	      	{
	      		if((month == 1 ||month == 3 ||month == 5 ||month == 7 ||month == 8 ||month == 10 ||month == 12) && day>=1&&day<=31)
	      		{
	      			return value.match(/^\d\d\d\d-\d\d-\d\d$/);
	      		}
	      		else if((month == 4 ||month == 6 ||month == 9 ||month == 11)&&day>=1&&day<=30)
	      		{
	      			return value.match(/^\d\d\d\d-\d\d-\d\d$/);
	      		}
	      		else
	      		{
	      			if(year%4==0 && day>=1 && day<=29)
	      			{
	      				return value.match(/^\d\d\d\d-\d\d-\d\d$/);
	      			}
	      			else if(year%4==0 && day>=1 && day<=28)
	      			{
	      				return value.match(/^\d\d\d\d-\d\d-\d\d$/);
	      			}
	      			else
	      			{
	      				return false;
	      			}
	      		}
	      	} 
      	return false;
      },
      "Please enter a date in the format YYYY-MM-DD"
    );
    
    $.validator.addMethod("greaterThanDate", 
		function(value, element, params) {
    	startYear = params.val().split('-')[0];
    	startMonth = params.val().split('-')[1];
    	startDay = params.val().split('-')[2];
    	endYear = value.split('-')[0];
    	endMonth = value.split('-')[1];
    	endDay = value.split('-')[2];
    	if(startYear < endYear)
    	{
    		return true;
    	}
    	else if(startYear>endYear)
    	{
    		return false;
    	}
    	else	//if equal
    	{
    		if(startMonth>endMonth)
    		{
    			return false;
    		}
    		else if(startMonth<endMonth)
    		{
    			return true;
    		}
    		else	//if equal
    		{
    			if(startDay<=endDay)
    			{
    				return true;
    			}
    			else
    			{
    				return false;
    			}
    		}
    	}
	},'Must be after the StartDate.');
	
	$.validator.addMethod("greaterThanTime", 
		function(value, element,params) {
    	startYear = $('#startDate').val().split('-')[0];
    	startMonth = $('#startDate').val().split('-')[1];
    	startDay = $('#startDate').val().split('-')[2];
    	endYear = $('#endDate').val().split('-')[0];
    	endMonth = $('#endDate').val().split('-')[1];
    	endDay = $('#endDate').val().split('-')[2];
    	
    	startHour = $('#startDateHour').val();
    	startMinute = $('#startDateMinute').val();
    	endHour = $('#endDateHour').val();
    	endMinute = $('#endDateMinute').val();
    	
    	if(startYear == endYear && startMonth == endMonth && startDay == endDay)
    	{
    		if(startHour>endHour)
    		{
    			return false;
    		}
    		else if (startHour < endHour)
    		{
    			return true;
    		}
    		else
    		{
    			if(startMinute<endMinute)
	    		{
	    			return true;
	    		}
	    		else
	    		{
	    			return false;
	    		}
    		}
    	}
    	else
    	{
    		return true;
    	}
	},'Must be after the Start Time.');
    
	$('#EditEventForm').validate({
	  rules: {
	    startDate: {
	      myDate: true
	    },
	    endDate: {
	      myDate: true,
	      greaterThanDate: $('#startDate')
	    },
	    endTimeMinute: {
	      	greaterThanTime: $('#startDate')
	    },
	  }
	});
});

</script>
<!-- Author: Amina Kadry This form is for logging the user out of his account -->
<div align="right">
<form name="logout" action="/logout/" method="POST">
{%csrf_token%}
<button type = "submit" value="submit">Logout</button> 
</form>
</div>
</head>
<body>
<h1>Edit Event</h1>

<!-- Author Heba El Mohandes:
 in this page the moderator edits event name, start date, end date, start time, end time and can edit whether he want to make the event private or public 
 validation: 1-if date was not entered correctly this message will appear(Please enter a date in the format YYYY-MM-DD)
 2-check that name date and time were entered as these fields are required-->
<form method="post" id="EditEventForm">{% csrf_token %}
<table border ="1">
<tr><td>Event Name</td><td><input id="name" name="name" value="{{template.eventName}}" type="text" size="30"  class="required" minlength="3" maxlength="60"/></td></tr>
<tr><td>Start Date</td><td><input id="startDate" name="startDate" value="{{startDate}}" type="text" size="30"  class="required"/></td></tr>
<tr><td>End Date</td><td><input id="endDate" name="endDate" value="{{endDate}}" type="text" size="30"  class="required"/></td></tr>
<tr><td>Start Time</td><td><input id="startDateHour" name="startTimeHour" type="number" min="00" max="23" value="{{startTimeHour}}"  class="required"/><input id="startDateMinute" name="startTimeMinute" type="number" value="{{startTimeMinute}}" min="00" max="59"  class="required"/></td></tr>
<tr><td>End Time</td><td><input id="endDateHour" name="endTimeHour" type="number" min="00" max="23" value="{{endTimeHour}}"  class="required"/><input id="endDateMinute" name="endTimeMinute" type="number" min="00" max="59" value="{{endTimeMinute}}" class="required"/></td></tr>
{% if event.isPublic = 0 %}
	<tr><td>Private</td><td><input id="private" name="private" type="checkbox"/></td></tr>
{% else %}
	<tr><td>Private</td><td><input id="private" name="private" type="checkbox" checked="yes"/></td></tr>
{% endif %}

<tr><td><input type="submit" value="Submit"/></td></tr></table>

</table>
</form>
</body>


<p>
<a href="/AboutUs/">About Us</a>
<a href="/ViewInstructions/">Instructions</a>
<a href  ="/Terms&Conditions/">  Terms & Conditions</a>
<a href  ="/News/">  Latest News and Updates</a>
<a href ="/Faqs/"> FAQS</a>
<a href ="/Contactus/"> Contact Us</a>


</html>